<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Widgets - SMS Admin Bootstrap</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="sms">

        <!-- google font -->
        <link href="http://fonts.googleapis.com/css?family=Aclonica:regular" rel="stylesheet" type="text/css" />

        <!-- styles -->
        <link href="css/bootstrap.css" rel="stylesheet">
        <link href="css/bootstrap-responsive.css" rel="stylesheet">
        <link href="css/sms.css" rel="stylesheet">
        <link href="css/sms-responsive.css" rel="stylesheet">
        <link href="css/sms-helper.css" rel="stylesheet">
        <link href="css/sms-icon.css" rel="stylesheet">
        <link href="css/font-awesome.css" rel="stylesheet">
        <link href="css/animate.css" rel="stylesheet">
        <link href="css/uniform.default.css" rel="stylesheet">
        
        <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>
        <!-- section header -->
        <header class="header" data-spy="affix" data-offset-top="0">
            <!--nav bar helper-->
            <div class="navbar-helper">
                <div class="row-fluid">
                    <!--panel site-name-->
                    <div class="span2">
                        <div class="panel-sitename">
                            <h2><a href="index.html"><span class="color-teal">SMS</span>&alpha;</a></h2>
                        </div>
                    </div>
                    <!--/panel name-->

                    <div class="span6">
                        <!--panel search-->
                        <div class="panel-search">
                            <form>
                                <div class="input-icon-append">
                                    <button type="submit" rel="tooltip-bottom" title="search" class="icon"><i class="icofont-search"></i></button>
                                    <input class="input-large search-query grd-white" maxlength="23" placeholder="Search here..." type="text">
                                </div>
                            </form>
                        </div><!--/panel search-->
                    </div>
                    <div class="span4">
                        <!--panel button ext-->
                        <div class="panel-ext">
                            <div class="btn-group">
                                <!--notification-->
                                <a class="btn btn-danger btn-small" data-toggle="dropdown" href="#" title="3 notification">3</a>
                                <ul class="dropdown-menu dropdown-notification">
                                    <li class="dropdown-header grd-white"><a href="#">View All Notifications</a></li>
                                    <li class="new">
                                        <a href="#">
                                            <div class="notification">John Doe commented on a post</div>
                                            <div class="media">
                                                <img class="media-object pull-left" data-src="js/holder.js/64x64" />
                                                <div class="media-body">
                                                    <h4 class="media-heading">Lorem ipsum <small class="helper-font-small"> john doe</small></h4>
                                                    <p>Raw denim you probably haven't heard of them jean shorts Austin.</p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="new">
                                        <a href="#">
                                            <div class="notification">Request new order</div>
                                            <div class="media">
                                                <img class="media-object pull-left" data-src="js/holder.js/64x64" />
                                                <div class="media-body">
                                                    <h4 class="media-heading">Tortor dapibus</h4>
                                                    <p>Vegan fanny pack odio cillum wes anderson 8-bit.</p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="new">
                                        <a href="#">
                                            <div class="notification">Request new order</div>
                                            <div class="media">
                                                <img class="media-object pull-left" data-src="js/holder.js/64x64" />
                                                <div class="media-body">
                                                    <h4 class="media-heading">Lacinia non</h4>
                                                    <p>Messenger bag gentrify pitchfork tattooed craft beer.</p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="notification">John Doe commented on a post</div>
                                            <div class="media">
                                                <img class="media-object pull-left" data-src="js/holder.js/64x64" />
                                                <div class="media-body">
                                                    <h4 class="media-heading">Lorem ipsum <small class="helper-font-small"> john doe</small></h4>
                                                    <p>Raw denim you probably haven't heard of them jean shorts Austin.</p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="notification">Request new order</div>
                                            <div class="media">
                                                <img class="media-object pull-left" data-src="js/holder.js/64x64" />
                                                <div class="media-body">
                                                    <h4 class="media-heading">Tortor dapibus</h4>
                                                    <p>Vegan fanny pack odio cillum wes anderson 8-bit.</p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="notification">Request new order</div>
                                            <div class="media">
                                                <img class="media-object pull-left" data-src="js/holder.js/64x64" />
                                                <div class="media-body">
                                                    <h4 class="media-heading">Lacinia non</h4>
                                                    <p>Messenger bag gentrify pitchfork tattooed craft beer.</p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <!-- <li class="dropdown-footer"><a href=""></a></li> -->
                                </ul><!--notification-->
                            </div>
                            <div class="btn-group">
                                <a class="btn btn-inverse btn-small dropdown-toggle" data-toggle="dropdown" href="#">
                                    Shortcut
                                </a>
                                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                                    <li><a tabindex="-1" href="calendar.html">Calendar</a></li>
                                    <li><a tabindex="-1" href="invoice.html">Invoice</a></li>
                                    <li><a tabindex="-1" href="message.html">Message</a></li>
                                    <li class="divider"></li>
                                    <li class="dropdown-submenu">
                                        <a tabindex="-1" href="#">Sample Page</a>
                                        <ul class="dropdown-menu">
                                            <li><a tabindex="-1" href="pricing.html">Pricing</a></li>
                                            <li><a tabindex="-1" href="bonus-page/resume/index.html">Resume</a></li>
                                        </ul>
                                    </li>
                                    <li class="dropdown-submenu">
                                        <a tabindex="-1" href="#">Error Page</a>
                                        <ul class="dropdown-menu">
                                            <li><a tabindex="-1" href="403.html">Error 403</a></li>
                                            <li><a tabindex="-1" href="404.html">Error 404</a></li>
                                            <li><a tabindex="-1" href="405.html">Error 405</a></li>
                                            <li><a tabindex="-1" href="500.html">Error 500</a></li>
                                            <li><a tabindex="-1" href="503.html">Error 503</a></li>
                                            <li><a tabindex="-1" href="under-construction.html">Under Construction</a></li>
                                            <li><a tabindex="-1" href="coming-soon.html">Coming Son</a></li>
                                        </ul>
                                    </li>
                                    <li class="divider"></li>
                                    <li><a tabindex="-1" href="#">Something else here</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <a class="btn btn-inverse btn-small" href="#">Other Action</a>
                            </div>
                            <div class="btn-group user-group">
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                    <img class="corner-all" align="middle" src="img/user-thumb.jpg" title="John Doe" alt="john doe" /> <!--this for display on PC device-->
                                    <button class="btn btn-small btn-inverse">John Doe</button> <!--this for display on tablet and phone device-->
                                </a>
                                <ul class="dropdown-menu dropdown-user" role="menu" aria-labelledby="dLabel">
                                    <li>
                                        <div class="media">
                                            <a class="pull-left" href="#">
                                                <img class="img-circle" src="img/user.jpg" title="profile" alt="profile" />
                                            </a>
                                            <div class="media-body description">
                                                <p><strong>John Doe</strong></p>
                                                <p class="muted">johndoe@mail.com</p>
                                                <p class="action"><a class="link" href="#">Activity</a> - <a class="link" href="#">Setting</a></p>
                                                <a class="btn btn-primary btn-small btn-block">View Profile</a>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="dropdown-footer">
                                        <div>
                                            <a class="btn btn-small pull-right" href="login.html">Logout</a>
                                            <a class="btn btn-small" href="#">Add Account</a>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div><!--panel button ext-->
                    </div>
                </div>
            </div><!--/nav bar helper-->
        </header>

        <!-- section content -->
        <section class="section">
            <div class="row-fluid">
                <!-- span side-left -->
                <div class="span1">
                    <!--side bar-->
                    <aside class="side-left">
                        <ul class="sidebar">
                            <li>
                                <a href="index.html" title="dashboard">
                                    <div class="helper-font-24">
                                        <i class="icofont-dashboard"></i>
                                    </div>
                                    <span class="sidebar-text">Dashboard</span>
                                </a>
                            </li>
                            <li>
                                <a href="interface.html" title="interface">
                                    <div class="helper-font-24">
                                        <i class="icofont-magnet"></i>
                                    </div>
                                    <span class="sidebar-text">Interface</span>
                                </a>
                            </li>
                            <li>
                                <a href="form.html" title="form">
                                    <div class="badge badge-important">3</div>
                                    <div class="helper-font-24">
                                        <i class="icofont-edit"></i>
                                    </div>
                                    <span class="sidebar-text">Form</span>
                                </a>
                                <ul class="sub-sidebar-form corner-top shadow-white">
                                    <li class="title muted">Quick Upload</li>
                                    <li>
                                        <input type="file" data-form="uniform" onchange="alert('your progres uploading file...')" />
                                    </li>
                                    <li class="divider"></li>
                                    <li>
                                        <a href="form.html" title="form element" class="corner-all">
                                            <i class="icofont-file"></i>
                                            <span class="sidebar-text">Form Element</span>
                                        </a>
                                    </li>
                                    <li class="divider"></li>
                                    <li>
                                        <a href="code-editor.html" title="code editor" class="corner-all">
                                            <i class="icofont-book"></i>
                                            <span class="sidebar-text">Code Editor</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="gallery.html" title="gallery" class="corner-all">
                                            <i class="icofont-picture"></i>
                                            <span class="sidebar-text">Gallery</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="charts.html" title="charts">
                                    <div class="helper-font-24">
                                        <i class="icofont-bar-chart"></i>
                                    </div>
                                    <span class="sidebar-text">charts</span>
                                </a>
                            </li>
                            <li>
                                <a href="tables.html" title="table">
                                    <div class="helper-font-24">
                                        <i class="icofont-table"></i>
                                    </div>
                                    <span class="sidebar-text">Tables</span>
                                </a>
                            </li>
                            <li>
                                <a href="grids.html" title="grids">
                                    <div class="helper-font-24">
                                        <i class="icofont-columns"></i>
                                    </div>
                                    <span class="sidebar-text">Grids</span>
                                </a>
                            </li>
                            <li>
                                <a href="icons.html" title="icons">
                                    <div class="helper-font-24">
                                        <i class="icofont-star"></i>
                                    </div>
                                    <span class="sidebar-text">Icons</span>
                                </a>
                            </li>
                            <li class="active">
                                <a href="widgets.html" title="widgets">
                                    <div class="helper-font-24">
                                        <i class="icofont-reorder"></i>
                                    </div>
                                    <span class="sidebar-text">Widgets</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" title="more">
                                    <div class="badge badge-important">5</div>
                                    <div class="helper-font-24">
                                        <i class="icofont-th-large"></i>
                                    </div>
                                    <span class="sidebar-text">More</span>
                                </a>
                                <ul class="sub-sidebar corner-top shadow-silver-dark">
                                    <li>
                                        <a href="404.html" title="not found">
                                            <div class="helper-font-24">
                                                <i class="icofont-warning-sign"></i>
                                            </div>
                                            <span class="sidebar-text">404</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="login.html" title="login">
                                            <div class="helper-font-24">
                                                <i class="icofont-lock"></i>
                                            </div>
                                            <span class="sidebar-text">Login</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="invoice.html" title="invoice">
                                            <div class="helper-font-24">
                                                <i class="icofont-barcode"></i>
                                            </div>
                                            <span class="sidebar-text">Invoice</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="pricing.html" title="pricing table">
                                            <div class="helper-font-24">
                                                <i class="icofont-briefcase"></i>
                                            </div>
                                            <span class="sidebar-text">Pricing</span>
                                        </a>
                                    </li>
                                    <li class="divider"></li>
                                    <li>
                                        <a href="bonus-page/resume/index.html" title="resume">
                                            <div class="helper-font-24">
                                                <i class="icofont-user"></i>
                                            </div>
                                            <span class="sidebar-text">Resume</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </aside><!--/side bar -->
                </div><!-- span side-left -->
                
                <!-- span content -->
                <div class="span9">
                    <!-- content -->
                    <div class="content">
                        <!-- content-header -->
                        <div class="content-header">
                            <ul class="content-header-action pull-right">
                                <li>
                                    <a href="#">
                                        <div class="badge-circle grd-green color-white"><i class="icofont-plus-sign"></i></div>
                                        <div class="action-text color-green">8765 <span class="helper-font-small color-silver-dark">Visits</span></div>
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <a href="#">
                                        <div class="badge-circle grd-teal color-white"><i class="icofont-user-md"></i></div>
                                        <div class="action-text color-teal">1437 <span class="helper-font-small color-silver-dark">Users</span></div>
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <a href="#">
                                        <div class="badge-circle grd-orange color-white">$</div>
                                        <div class="action-text color-orange">4367 <span class="helper-font-small color-silver-dark">Orders</span></div>
                                    </a>
                                </li>
                            </ul>
                            <h2><i class="icofont-leaf"></i> Widgets</h2>
                        </div><!-- /content-header -->
                        
                        <!-- content-breadcrumb -->
                        <div class="content-breadcrumb">
                            <!--breadcrumb-nav-->
                            <ul class="breadcrumb-nav pull-right">
                                <li class="divider"></li>
                                <li class="btn-group">
                                    <a href="#page-box" class="scroll btn btn-small btn-link">
                                        <i class="icofont-link"></i> Box
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li class="btn-group">
                                    <a href="#page-tabs" class="scroll btn btn-small btn-link">
                                        <i class="icofont-link"></i> Box Tabs
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li class="btn-group">
                                    <a href="#page-accordion" class="scroll btn btn-small btn-link dropdown-toggle" data-toggle="dropdown">
                                        <i class="icofont-link"></i> Accordion
                                    </a>
                                </li>
                            </ul><!--/breadcrumb-nav-->
                            
                            <!--breadcrumb-->
                            <ul class="breadcrumb">
                                <li><a href="index.html"><i class="icofont-home"></i> Dashboard</a> <span class="divider">&rsaquo;</span></li>
                                <li><a href="widgets.html">Widgets</a> <span class="divider">&rsaquo;</span></li>
                                <li class="active">Data elements</li>
                            </ul><!--/breadcrumb-->
                        </div><!-- /content-breadcrumb -->
                        
                        <!-- content-body -->
                        <div class="content-body">
                            <p>Lorem ipsum dolor sit amet, natoque per at morbi at vestibulum leo, velit non, curabitur ac est. Donec sit mollis imperdiet at tristique dapibus, qui vel in at fusce congue, mi arcu fusce, lacus vitae diam aliquam vel sed curabitur, auctor libero sed libero lectus pellentesque. Et sagittis ut vel dolor nullam proin, porta et morbi turpis vestibulum massa, ligula vestibulum nascetur wisi sed pharetra sem, lorem ipsam. Purus deserunt dignissim imperdiet, orci arcu felis, a aliquam sed. Sit ac pulvinar neque. In pharetra, aut neque congue sodales morbi enim lacus, duis lorem ut eu maecenas, in a orci. Nulla mauris nunc pellentesque sit, integer vivamus nullam dolor ut, sed suspendisse venenatis nec nulla. Erat duis lectus vel wisi, quibusdam aliquam vehicula eleifend ut, massa massa quisque sodales id dictumst.</p>
                            
                            <!-- =========================================
                                            BOX & ANIMATE
                            =========================================== -->
                            <div id="page-box" class="page-header">
                                <h3>Box & Animate</h3>
                            </div>
                            <div class="row-fluid">
                                <div class="span6">
                                    <div class="box corner-all">
                                        <div class="box-header bg-white color-black corner-top">
                                            <div class="header-control">
                                                <a data-box="collapse"><i class="icofont-caret-up"></i></a>
                                                <a data-box="close">&times;</a>
                                            </div>
                                            <span>Header White</span>
                                        </div>
                                        <div class="box-body">
                                            <p>Lorem ipsum dolor sit amet, natoque per at morbi at vestibulum leo, velit non, curabitur ac est. Donec sit mollis imperdiet at tristique dapibus, qui vel in at fusce congue, mi arcu fusce, lacus vitae diam aliquam vel sed curabitur, auctor libero sed libero lectus pellentesque. Et sagittis ut vel dolor nullam proin, porta et morbi turpis vestibulum massa, ligula vestibulum nascetur wisi sed pharetra sem, lorem ipsam. Purus deserunt dignissim imperdiet, orci arcu felis, a aliquam sed. Sit ac pulvinar neque. In pharetra, aut neque congue sodales morbi enim lacus, duis lorem ut eu maecenas, in a orci. Nulla mauris nunc pellentesque sit, integer vivamus nullam dolor ut, sed suspendisse venenatis nec nulla. Erat duis lectus vel wisi, quibusdam aliquam vehicula eleifend ut, massa massa quisque sodales id dictumst.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="span6">
                                    <div class="box corner-all">
                                        <div class="box-header bg-black color-white corner-top">
                                            <div class="header-control">
                                                <a data-box="collapse"><i class="icofont-caret-up"></i></a>
                                                <a data-box="close" data-hide="flipOutX">&times;</a>
                                            </div>
                                            <span>Header Black</span>
                                        </div>
                                        <div class="box-body corner-bottom">
                                            <p>Lorem ipsum dolor sit amet, natoque per at morbi at vestibulum leo, velit non, curabitur ac est. Donec sit mollis imperdiet at tristique dapibus, qui vel in at fusce congue, mi arcu fusce, lacus vitae diam aliquam vel sed curabitur, auctor libero sed libero lectus pellentesque. Et sagittis ut vel dolor nullam proin, porta et morbi turpis vestibulum massa, ligula vestibulum nascetur wisi sed pharetra sem, lorem ipsam. Purus deserunt dignissim imperdiet, orci arcu felis, a aliquam sed. Sit ac pulvinar neque. In pharetra, aut neque congue sodales morbi enim lacus, duis lorem ut eu maecenas, in a orci. Nulla mauris nunc pellentesque sit, integer vivamus nullam dolor ut, sed suspendisse venenatis nec nulla. Erat duis lectus vel wisi, quibusdam aliquam vehicula eleifend ut, massa massa quisque sodales id dictumst.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row-fluid">
                                <div class="span6">
                                    <div class="box corner-all">
                                        <div class="box-header grd-black color-white corner-top">
                                            <div class="header-control">
                                                <a class="custom-action"><i class="icofont-cog"></i></a>
                                                <a data-box="collapse"><i class="icofont-caret-up"></i></a>
                                                <a data-box="close" data-hide="rotateOut">&times;</a>
                                            </div>
                                            <span>Header Gradient Black</span>
                                        </div>
                                        <div class="box-body">
                                            <p>Lorem ipsum dolor sit amet, natoque per at morbi at vestibulum leo, velit non, curabitur ac est. Donec sit mollis imperdiet at tristique dapibus, qui vel in at fusce congue, mi arcu fusce, lacus vitae diam aliquam vel sed curabitur, auctor libero sed libero lectus pellentesque. Et sagittis ut vel dolor nullam proin, porta et morbi turpis vestibulum massa, ligula vestibulum nascetur wisi sed pharetra sem, lorem ipsam. Purus deserunt dignissim imperdiet, orci arcu felis, a aliquam sed. Sit ac pulvinar neque. In pharetra, aut neque congue sodales morbi enim lacus, duis lorem ut eu maecenas, in a orci. Nulla mauris nunc pellentesque sit, integer vivamus nullam dolor ut, sed suspendisse venenatis nec nulla. Erat duis lectus vel wisi, quibusdam aliquam vehicula eleifend ut, massa massa quisque sodales id dictumst.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="span6">
                                    <div class="box corner-all">
                                        <div class="box-header grd-blue color-white corner-top">
                                            <div class="header-control">
                                                <a class="custom-action"><i class="icofont-cog"></i></a>
                                                <a data-box="collapse"><i class="icofont-caret-up"></i></a>
                                                <a data-box="close" data-hide="bounceOutRight">&times;</a>
                                            </div>
                                            <span>Header Gradient Blue</span>
                                        </div>
                                        <div class="box-body corner-bottom">
                                            <p>Lorem ipsum dolor sit amet, natoque per at morbi at vestibulum leo, velit non, curabitur ac est. Donec sit mollis imperdiet at tristique dapibus, qui vel in at fusce congue, mi arcu fusce, lacus vitae diam aliquam vel sed curabitur, auctor libero sed libero lectus pellentesque. Et sagittis ut vel dolor nullam proin, porta et morbi turpis vestibulum massa, ligula vestibulum nascetur wisi sed pharetra sem, lorem ipsam. Purus deserunt dignissim imperdiet, orci arcu felis, a aliquam sed. Sit ac pulvinar neque. In pharetra, aut neque congue sodales morbi enim lacus, duis lorem ut eu maecenas, in a orci. Nulla mauris nunc pellentesque sit, integer vivamus nullam dolor ut, sed suspendisse venenatis nec nulla. Erat duis lectus vel wisi, quibusdam aliquam vehicula eleifend ut, massa massa quisque sodales id dictumst.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row-fluid">
                                <div class="span6">
                                    <div class="box corner-all">
                                        <div class="box-header grd-green color-white corner-top">
                                            <div class="header-control">
                                                <a class="custom-action"><i class="icofont-cog"></i></a>
                                                <a data-box="collapse"><i class="icofont-caret-up"></i></a>
                                                <a data-box="close" data-hide="bounceOut">&times;</a>
                                            </div>
                                            <span>Header Gradient Green</span>
                                        </div>
                                        <div class="box-body">
                                            <p>Lorem ipsum dolor sit amet, natoque per at morbi at vestibulum leo, velit non, curabitur ac est. Donec sit mollis imperdiet at tristique dapibus, qui vel in at fusce congue, mi arcu fusce, lacus vitae diam aliquam vel sed curabitur, auctor libero sed libero lectus pellentesque. Et sagittis ut vel dolor nullam proin, porta et morbi turpis vestibulum massa, ligula vestibulum nascetur wisi sed pharetra sem, lorem ipsam. Purus deserunt dignissim imperdiet, orci arcu felis, a aliquam sed. Sit ac pulvinar neque. In pharetra, aut neque congue sodales morbi enim lacus, duis lorem ut eu maecenas, in a orci. Nulla mauris nunc pellentesque sit, integer vivamus nullam dolor ut, sed suspendisse venenatis nec nulla. Erat duis lectus vel wisi, quibusdam aliquam vehicula eleifend ut, massa massa quisque sodales id dictumst.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="span6">
                                    <div class="box corner-all">
                                        <div class="box-header grd-orange color-white corner-top">
                                            <div class="header-control">
                                                <a class="custom-action"><i class="icofont-cog"></i></a>
                                                <a data-box="collapse"><i class="icofont-caret-up"></i></a>
                                                <a data-box="close" data-hide="rotateOutDownLeft">&times;</a>
                                            </div>
                                            <span>Header Gradient Orange</span>
                                        </div>
                                        <div class="box-body corner-bottom">
                                            <p>Lorem ipsum dolor sit amet, natoque per at morbi at vestibulum leo, velit non, curabitur ac est. Donec sit mollis imperdiet at tristique dapibus, qui vel in at fusce congue, mi arcu fusce, lacus vitae diam aliquam vel sed curabitur, auctor libero sed libero lectus pellentesque. Et sagittis ut vel dolor nullam proin, porta et morbi turpis vestibulum massa, ligula vestibulum nascetur wisi sed pharetra sem, lorem ipsam. Purus deserunt dignissim imperdiet, orci arcu felis, a aliquam sed. Sit ac pulvinar neque. In pharetra, aut neque congue sodales morbi enim lacus, duis lorem ut eu maecenas, in a orci. Nulla mauris nunc pellentesque sit, integer vivamus nullam dolor ut, sed suspendisse venenatis nec nulla. Erat duis lectus vel wisi, quibusdam aliquam vehicula eleifend ut, massa massa quisque sodales id dictumst.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row-fluid">
                                <div class="span6">
                                    <div class="box corner-all">
                                        <div class="box-header grd-purple color-white corner-top">
                                            <div class="header-control">
                                                <a class="custom-action"><i class="icofont-cog"></i></a>
                                                <a data-box="collapse"><i class="icofont-caret-up"></i></a>
                                                <a data-box="close" data-hide="rotateOutUpRight">&times;</a>
                                            </div>
                                            <span>Header Gradient Purple</span>
                                        </div>
                                        <div class="box-body">
                                            <p>Lorem ipsum dolor sit amet, natoque per at morbi at vestibulum leo, velit non, curabitur ac est. Donec sit mollis imperdiet at tristique dapibus, qui vel in at fusce congue, mi arcu fusce, lacus vitae diam aliquam vel sed curabitur, auctor libero sed libero lectus pellentesque. Et sagittis ut vel dolor nullam proin, porta et morbi turpis vestibulum massa, ligula vestibulum nascetur wisi sed pharetra sem, lorem ipsam. Purus deserunt dignissim imperdiet, orci arcu felis, a aliquam sed. Sit ac pulvinar neque. In pharetra, aut neque congue sodales morbi enim lacus, duis lorem ut eu maecenas, in a orci. Nulla mauris nunc pellentesque sit, integer vivamus nullam dolor ut, sed suspendisse venenatis nec nulla. Erat duis lectus vel wisi, quibusdam aliquam vehicula eleifend ut, massa massa quisque sodales id dictumst.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="span6">
                                    <div class="box corner-all">
                                        <div class="box-header grd-purple-dark color-white corner-top">
                                            <div class="header-control">
                                                <a class="custom-action"><i class="icofont-cog"></i></a>
                                                <a data-box="collapse"><i class="icofont-caret-up"></i></a>
                                                <a data-box="close" data-hide="lightSpeedOut">&times;</a>
                                            </div>
                                            <span>Header Gradient Purple Dark</span>
                                        </div>
                                        <div class="box-body corner-bottom">
                                            <p>Lorem ipsum dolor sit amet, natoque per at morbi at vestibulum leo, velit non, curabitur ac est. Donec sit mollis imperdiet at tristique dapibus, qui vel in at fusce congue, mi arcu fusce, lacus vitae diam aliquam vel sed curabitur, auctor libero sed libero lectus pellentesque. Et sagittis ut vel dolor nullam proin, porta et morbi turpis vestibulum massa, ligula vestibulum nascetur wisi sed pharetra sem, lorem ipsam. Purus deserunt dignissim imperdiet, orci arcu felis, a aliquam sed. Sit ac pulvinar neque. In pharetra, aut neque congue sodales morbi enim lacus, duis lorem ut eu maecenas, in a orci. Nulla mauris nunc pellentesque sit, integer vivamus nullam dolor ut, sed suspendisse venenatis nec nulla. Erat duis lectus vel wisi, quibusdam aliquam vehicula eleifend ut, massa massa quisque sodales id dictumst.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row-fluid">
                                <div class="span6">
                                    <div class="box corner-all">
                                        <div class="box-header grd-red color-white corner-top">
                                            <div class="header-control">
                                                <a class="custom-action"><i class="icofont-cog"></i></a>
                                                <a data-box="collapse"><i class="icofont-caret-up"></i></a>
                                                <a data-box="close" data-hide="hinge">&times;</a>
                                            </div>
                                            <span>Header Gradient Red</span>
                                        </div>
                                        <div class="box-body">
                                            <p>Lorem ipsum dolor sit amet, natoque per at morbi at vestibulum leo, velit non, curabitur ac est. Donec sit mollis imperdiet at tristique dapibus, qui vel in at fusce congue, mi arcu fusce, lacus vitae diam aliquam vel sed curabitur, auctor libero sed libero lectus pellentesque. Et sagittis ut vel dolor nullam proin, porta et morbi turpis vestibulum massa, ligula vestibulum nascetur wisi sed pharetra sem, lorem ipsam. Purus deserunt dignissim imperdiet, orci arcu felis, a aliquam sed. Sit ac pulvinar neque. In pharetra, aut neque congue sodales morbi enim lacus, duis lorem ut eu maecenas, in a orci. Nulla mauris nunc pellentesque sit, integer vivamus nullam dolor ut, sed suspendisse venenatis nec nulla. Erat duis lectus vel wisi, quibusdam aliquam vehicula eleifend ut, massa massa quisque sodales id dictumst.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="span6">
                                    <div class="box corner-all">
                                        <div class="box-header grd-sky color-white corner-top">
                                            <div class="header-control">
                                                <a class="custom-action"><i class="icofont-cog"></i></a>
                                                <a data-box="collapse"><i class="icofont-caret-up"></i></a>
                                                <a data-box="close" data-hide="rollOut">&times;</a>
                                            </div>
                                            <span>Header Gradient Sky</span>
                                        </div>
                                        <div class="box-body corner-bottom">
                                            <p>Lorem ipsum dolor sit amet, natoque per at morbi at vestibulum leo, velit non, curabitur ac est. Donec sit mollis imperdiet at tristique dapibus, qui vel in at fusce congue, mi arcu fusce, lacus vitae diam aliquam vel sed curabitur, auctor libero sed libero lectus pellentesque. Et sagittis ut vel dolor nullam proin, porta et morbi turpis vestibulum massa, ligula vestibulum nascetur wisi sed pharetra sem, lorem ipsam. Purus deserunt dignissim imperdiet, orci arcu felis, a aliquam sed. Sit ac pulvinar neque. In pharetra, aut neque congue sodales morbi enim lacus, duis lorem ut eu maecenas, in a orci. Nulla mauris nunc pellentesque sit, integer vivamus nullam dolor ut, sed suspendisse venenatis nec nulla. Erat duis lectus vel wisi, quibusdam aliquam vehicula eleifend ut, massa massa quisque sodales id dictumst.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row-fluid">
                                <div class="span6">
                                    <div class="box corner-all">
                                        <div class="box-header grd-teal color-white corner-top">
                                            <div class="header-control">
                                                <a class="custom-action"><i class="icofont-cog"></i></a>
                                                <a data-box="collapse"><i class="icofont-caret-up"></i></a>
                                                <a data-box="close" data-hide="bounceOutUp">&times;</a>
                                            </div>
                                            <span>Header Gradient Teal</span>
                                        </div>
                                        <div class="box-body">
                                            <p>Lorem ipsum dolor sit amet, natoque per at morbi at vestibulum leo, velit non, curabitur ac est. Donec sit mollis imperdiet at tristique dapibus, qui vel in at fusce congue, mi arcu fusce, lacus vitae diam aliquam vel sed curabitur, auctor libero sed libero lectus pellentesque. Et sagittis ut vel dolor nullam proin, porta et morbi turpis vestibulum massa, ligula vestibulum nascetur wisi sed pharetra sem, lorem ipsam. Purus deserunt dignissim imperdiet, orci arcu felis, a aliquam sed. Sit ac pulvinar neque. In pharetra, aut neque congue sodales morbi enim lacus, duis lorem ut eu maecenas, in a orci. Nulla mauris nunc pellentesque sit, integer vivamus nullam dolor ut, sed suspendisse venenatis nec nulla. Erat duis lectus vel wisi, quibusdam aliquam vehicula eleifend ut, massa massa quisque sodales id dictumst.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="span6">
                                    <div class="box corner-all">
                                        <div class="box-header grd-white color-silver-dark corner-top">
                                            <div class="header-control">
                                                <a class="custom-action"><i class="icofont-cog"></i></a>
                                                <a data-box="collapse"><i class="icofont-caret-up"></i></a>
                                                <a data-box="close" data-hide="fadeOutUpBig">&times;</a>
                                            </div>
                                            <span>Header Gradient White</span>
                                        </div>
                                        <div class="box-body corner-bottom">
                                            <p>Lorem ipsum dolor sit amet, natoque per at morbi at vestibulum leo, velit non, curabitur ac est. Donec sit mollis imperdiet at tristique dapibus, qui vel in at fusce congue, mi arcu fusce, lacus vitae diam aliquam vel sed curabitur, auctor libero sed libero lectus pellentesque. Et sagittis ut vel dolor nullam proin, porta et morbi turpis vestibulum massa, ligula vestibulum nascetur wisi sed pharetra sem, lorem ipsam. Purus deserunt dignissim imperdiet, orci arcu felis, a aliquam sed. Sit ac pulvinar neque. In pharetra, aut neque congue sodales morbi enim lacus, duis lorem ut eu maecenas, in a orci. Nulla mauris nunc pellentesque sit, integer vivamus nullam dolor ut, sed suspendisse venenatis nec nulla. Erat duis lectus vel wisi, quibusdam aliquam vehicula eleifend ut, massa massa quisque sodales id dictumst.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row-fluid">
                                <div class="span6">
                                    <div class="box corner-all">
                                        <div class="box-header grd-win8 color-white corner-top">
                                            <div class="header-control">
                                                <a class="custom-action"><i class="icofont-cog"></i></a>
                                                <a data-box="collapse"><i class="icofont-caret-up"></i></a>
                                                <a data-box="close" data-hide="fadeOutUp">&times;</a>
                                            </div>
                                            <span>Header Gradient Win8</span>
                                        </div>
                                        <div class="box-body">
                                            <p>Lorem ipsum dolor sit amet, natoque per at morbi at vestibulum leo, velit non, curabitur ac est. Donec sit mollis imperdiet at tristique dapibus, qui vel in at fusce congue, mi arcu fusce, lacus vitae diam aliquam vel sed curabitur, auctor libero sed libero lectus pellentesque. Et sagittis ut vel dolor nullam proin, porta et morbi turpis vestibulum massa, ligula vestibulum nascetur wisi sed pharetra sem, lorem ipsam. Purus deserunt dignissim imperdiet, orci arcu felis, a aliquam sed. Sit ac pulvinar neque. In pharetra, aut neque congue sodales morbi enim lacus, duis lorem ut eu maecenas, in a orci. Nulla mauris nunc pellentesque sit, integer vivamus nullam dolor ut, sed suspendisse venenatis nec nulla. Erat duis lectus vel wisi, quibusdam aliquam vehicula eleifend ut, massa massa quisque sodales id dictumst.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- =========================================
                                            END BOX & ANIMATE
                            =========================================== -->
                            
                            
                            <!-- =========================================
                                            BOX TAB
                            =========================================== -->
                            <div id="page-tabs" class="page-header">
                                <h3>Box Tab</h3>
                            </div>
                            <!-- =========================================
                                            BOX TAB DEFAULT
                            =========================================== -->
                            <div class="row-fluid">
                                <!--span-->
                                <div class="span6">
                                    <!--box tab-->
                                    <div class="box-tab corner-all">
                                        <div class="box-header corner-top">
                                            <ul class="nav nav-tabs">
                                                <!--tab action-->
                                                <li class="dropdown pull-right">
                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icofont-cogs"></i></a>
                                                    <ul class="dropdown-menu">
                                                        <li><a href="#collapse" data-toggle="tab">@collapse</a></li>
                                                        <li><a href="#close" data-toggle="tab">@close</a></li>
                                                        <li><a href="#other" data-toggle="tab">@other action</a></li>
                                                    </ul>
                                                </li><!--/tab action-->
                                                <!--tab menus-->
                                                <li class="active"><a data-toggle="tab" href="#boxtab-1">Tab 1</a></li>
                                                <li><a data-toggle="tab" href="#boxtab-2">Tab 2</a></li>
                                                <li class="dropdown">
                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                                                    <ul class="dropdown-menu">
                                                        <li><a href="#boxdropdown-1" data-toggle="tab">dropdown 1</a></li>
                                                        <li><a href="#boxdropdown-2" data-toggle="tab">dropdown 2</a></li>
                                                    </ul>
                                                </li><!--/tab menus-->
                                            </ul>
                                        </div>
                                        <div class="box-body">
                                            <!-- widgets-tab-body -->
                                            <div class="tab-content">
                                                <div class="tab-pane fade in active" id="boxtab-1">
                                                    <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
                                                </div>
                                                <div class="tab-pane fade" id="boxtab-2">
                                                    <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
                                                </div>
                                                <div class="tab-pane fade" id="boxdropdown-1">
                                                    <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
                                                </div>
                                                <div class="tab-pane fade" id="boxdropdown-2">
                                                    <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
                                                </div>
                                            </div><!--/widgets-tab-body-->
                                        </div>
                                    </div><!--/box tab-->
                                </div><!--/span-->

                                <!--span-->
                                <div class="span6">
                                  <!--box tab-->
                                    <div class="box-tab corner-all">
                                        <div class="box-header corner-top">
                                            <ul class="nav nav-pills">
                                                <!--tab action-->
                                                <li class="dropdown pull-right">
                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icofont-cogs"></i></a>
                                                    <ul class="dropdown-menu">
                                                        <li><a href="#collapse" data-toggle="tab">@collapse</a></li>
                                                        <li><a href="#close" data-toggle="tab">@close</a></li>
                                                        <li><a href="#other" data-toggle="tab">@other action</a></li>
                                                    </ul>
                                                </li><!--/tab action-->
                                                <!--tab menus-->
                                                <li class="active"><a data-toggle="tab" href="#boxtabpill-1">Tab 1</a></li>
                                                <li><a data-toggle="tab" href="#boxtabpill-2">Tab 2</a></li>
                                                <li class="dropdown">
                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                                                    <ul class="dropdown-menu">
                                                        <li><a href="#boxdropdownpill-1" data-toggle="tab">dropdown 1</a></li>
                                                        <li><a href="#boxdropdownpill-2" data-toggle="tab">dropdown 2</a></li>
                                                    </ul>
                                                </li><!--/tab menus-->
                                            </ul>
                                        </div>
                                        <div class="box-body">
                                            <!-- widgets-tab-body -->
                                            <div class="tab-content">
                                                <div class="tab-pane fade in active" id="boxtabpill-1">
                                                    <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
                                                </div>
                                                <div class="tab-pane fade" id="boxtabpill-2">
                                                    <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
                                                </div>
                                                <div class="tab-pane fade" id="boxdropdownpill-1">
                                                    <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
                                                </div>
                                                <div class="tab-pane fade" id="boxdropdownpill-2">
                                                    <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
                                                </div>
                                            </div><!--/widgets-tab-body-->
                                        </div>
                                    </div><!--/box tab-->
                                </div><!--/span-->
                            </div><!--/row-fluid-->
                            
                            <!-- =========================================
                                            BOX TAB BELLOW
                            =========================================== -->
                            <!--row-fluid-->
                            <div class="row-fluid">
                                <!--span-->
                                <div class="span6">
                                    <!--box tab-->
                                    <div class="box-tab corner-all">
                                        <div class="tabbable tabs-below">
                                            <!-- widgets-tab-body -->
                                            <div class="tab-content">
                                                <div class="tab-pane fade in active" id="boxtab-bellow-1">
                                                    <p>I'm in Section A.</p>
                                                </div>
                                                <div class="tab-pane fade" id="boxtab-bellow-2">
                                                    <p>Howdy, I'm in Section B.</p>
                                                </div>
                                                <div class="tab-pane fade" id="boxtab-bellow-3">
                                                    <p>What up girl, this is Section C.</p>
                                                </div>
                                            </div><!--/widgets-tab-body-->
                                            <ul class="nav nav-tabs">
                                                <!--tab action-->
                                                <li class="dropup pull-right">
                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icofont-cogs"></i></a>
                                                    <ul class="dropdown-menu">
                                                        <li><a href="#collapse" data-toggle="tab">@collapse</a></li>
                                                        <li><a href="#close" data-toggle="tab">@close</a></li>
                                                        <li><a href="#other" data-toggle="tab">@other action</a></li>
                                                    </ul>
                                                </li><!--/tab action-->
                                                <!--tab menus-->
                                                <li class="active"><a data-toggle="tab" href="#boxtab-bellow-1">Section 1</a></li>
                                                <li><a data-toggle="tab" href="#boxtab-bellow-2">Section 2</a></li>
                                                <li><a data-toggle="tab" href="#boxtab-bellow-3">Section 3</a></li>
                                            </ul>
                                        </div>
                                    </div><!--/box tab-->
                                </div><!--/span-->
                                
                                <!--span-->
                                <div class="span6">
                                    <!--box tab-->
                                    <div class="box-tab corner-all">
                                        <div class="tabbable tabs-below">
                                            <!-- widgets-tab-body -->
                                            <div class="tab-content">
                                                <div class="tab-pane fade in active" id="boxpills-bellow-1">
                                                    <p>I'm in Section A.</p>
                                                </div>
                                                <div class="tab-pane fade" id="boxpills-bellow-2">
                                                    <p>Howdy, I'm in Section B.</p>
                                                </div>
                                                <div class="tab-pane fade" id="boxpills-bellow-3">
                                                    <p>What up girl, this is Section C.</p>
                                                </div>
                                            </div><!--/widgets-tab-body-->
                                            <ul class="nav nav-pills">
                                                <!--tab action-->
                                                <li class="dropup pull-right">
                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icofont-cogs"></i></a>
                                                    <ul class="dropdown-menu">
                                                        <li><a href="#collapse" data-toggle="tab">@collapse</a></li>
                                                        <li><a href="#close" data-toggle="tab">@close</a></li>
                                                        <li><a href="#other" data-toggle="tab">@other action</a></li>
                                                    </ul>
                                                </li><!--/tab action-->
                                                <!--tab menus-->
                                                <li class="active"><a data-toggle="tab" href="#boxpills-bellow-1">Section 1</a></li>
                                                <li><a data-toggle="tab" href="#boxpills-bellow-2">Section 2</a></li>
                                                <li><a data-toggle="tab" href="#boxpills-bellow-3">Section 3</a></li>
                                            </ul>
                                        </div>
                                    </div><!--/box tab-->
                                </div><!--/span-->
                            </div><!--/row-fluid-->
                            
                            <!-- =========================================
                                            BOX TAB LEFT & RIGHT
                            =========================================== -->
                            <!--row-fluid-->
                            <div class="row-fluid">
                                <!--span-->
                                <div class="span6">
                                    <!--box tab-->
                                    <div class="box-tab corner-all">
                                        <div class="tabbable tabs-left">
                                            <ul class="nav nav-tabs">
                                                <!--tab menus-->
                                                <li class="active"><a data-toggle="tab" href="#boxtab-left-1">Section 1</a></li>
                                                <li><a data-toggle="tab" href="#boxtab-left-2">Section 2</a></li>
                                                <li><a data-toggle="tab" href="#boxtab-left-3">Section 3</a></li>
                                            </ul>
                                            <!-- widgets-tab-body -->
                                            <div class="tab-content">
                                                <div class="tab-pane fade in active" id="boxtab-left-1">
                                                    <p>I'm in Section A.</p>
                                                </div>
                                                <div class="tab-pane fade" id="boxtab-left-2">
                                                    <p>Howdy, I'm in Section B.</p>
                                                </div>
                                                <div class="tab-pane fade" id="boxtab-left-3">
                                                    <p>What up girl, this is Section C.</p>
                                                </div>
                                            </div><!--/widgets-tab-body-->
                                        </div>
                                    </div><!--/box tab-->
                                </div><!--/span-->
                                
                                <!--span-->
                                <div class="span6">
                                    <!--box tab-->
                                    <div class="box-tab corner-all">
                                        <div class="tabbable tabs-right">
                                            <ul class="nav nav-tabs">
                                                <!--tab menus-->
                                                <li class="active"><a data-toggle="tab" href="#boxtab-right-1">Section 1</a></li>
                                                <li><a data-toggle="tab" href="#boxtab-right-2">Section 2</a></li>
                                                <li><a data-toggle="tab" href="#boxtab-right-3">Section 3</a></li>
                                            </ul>
                                            <!-- widgets-tab-body -->
                                            <div class="tab-content">
                                                <div class="tab-pane fade in active" id="boxtab-right-1">
                                                    <p>I'm in Section A.</p>
                                                </div>
                                                <div class="tab-pane fade" id="boxtab-right-2">
                                                    <p>Howdy, I'm in Section B.</p>
                                                </div>
                                                <div class="tab-pane fade" id="boxtab-right-3">
                                                    <p>What up girl, this is Section C.</p>
                                                </div>
                                            </div><!--/widgets-tab-body-->
                                        </div>
                                    </div><!--/box tab-->
                                </div><!--/span-->
                            </div><!--/row-fluid-->
                            <!-- =========================================
                                            END BOX TAB
                            =========================================== -->
                            
                            <!-- =========================================
                                            ACCORDION
                            =========================================== -->
                            <div id="page-accordion" class="page-header">
                                <h3>Accordion</h3>
                            </div>
                            <div class="row-fluid">
                                <div class="span12">
                                    <div class="accordion" id="accordion">
                                        <div class="accordion-group">
                                            <div class="accordion-heading">
                                                <a class="accordion-toggle bg-black color-white" data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                                                    Collapsible Group Item #1
                                                </a>
                                            </div>
                                            <div id="collapse1" class="accordion-body collapse in">
                                                <div class="accordion-inner">
                                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                                </div>
                                            </div>
                                        </div>
                                        <div class="accordion-group">
                                            <div class="accordion-heading">
                                                <a class="accordion-toggle bg-blue color-white" data-toggle="collapse" data-parent="#accordion" href="#collapse2">
                                                    Collapsible Group Item #2
                                                </a>
                                            </div>
                                            <div id="collapse2" class="accordion-body collapse">
                                                <div class="accordion-inner">
                                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                                </div>
                                            </div>
                                        </div>
                                        <div class="accordion-group">
                                            <div class="accordion-heading">
                                                <a class="accordion-toggle bg-green color-white" data-toggle="collapse" data-parent="#accordion" href="#collapse3">
                                                    Collapsible Group Item #3
                                                </a>
                                            </div>
                                            <div id="collapse3" class="accordion-body collapse">
                                                <div class="accordion-inner">
                                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                                </div>
                                            </div>
                                        </div>
                                        <div class="accordion-group">
                                            <div class="accordion-heading">
                                                <a class="accordion-toggle bg-orange color-white" data-toggle="collapse" data-parent="#accordion" href="#collapse4">
                                                    Collapsible Group Item #4
                                                </a>
                                            </div>
                                            <div id="collapse4" class="accordion-body collapse">
                                                <div class="accordion-inner">
                                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                                </div>
                                            </div>
                                        </div>
                                        <div class="accordion-group">
                                            <div class="accordion-heading">
                                                <a class="accordion-toggle bg-purple color-white" data-toggle="collapse" data-parent="#accordion" href="#collapse5">
                                                    Collapsible Group Item #5
                                                </a>
                                            </div>
                                            <div id="collapse5" class="accordion-body collapse">
                                                <div class="accordion-inner">
                                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                                </div>
                                            </div>
                                        </div>
                                        <div class="accordion-group">
                                            <div class="accordion-heading">
                                                <a class="accordion-toggle bg-purple-dark color-white" data-toggle="collapse" data-parent="#accordion" href="#collapse6">
                                                    Collapsible Group Item #6
                                                </a>
                                            </div>
                                            <div id="collapse6" class="accordion-body collapse">
                                                <div class="accordion-inner">
                                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                                </div>
                                            </div>
                                        </div>
                                        <div class="accordion-group">
                                            <div class="accordion-heading">
                                                <a class="accordion-toggle bg-red color-white" data-toggle="collapse" data-parent="#accordion" href="#collapse7">
                                                    Collapsible Group Item #7
                                                </a>
                                            </div>
                                            <div id="collapse7" class="accordion-body collapse">
                                                <div class="accordion-inner">
                                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                                </div>
                                            </div>
                                        </div>
                                        <div class="accordion-group">
                                            <div class="accordion-heading">
                                                <a class="accordion-toggle bg-silver color-black" data-toggle="collapse" data-parent="#accordion" href="#collapse8">
                                                    Collapsible Group Item #8
                                                </a>
                                            </div>
                                            <div id="collapse8" class="accordion-body collapse">
                                                <div class="accordion-inner">
                                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                                </div>
                                            </div>
                                        </div>
                                        <div class="accordion-group">
                                            <div class="accordion-heading">
                                                <a class="accordion-toggle bg-sky color-white" data-toggle="collapse" data-parent="#accordion" href="#collapse9">
                                                    Collapsible Group Item #9
                                                </a>
                                            </div>
                                            <div id="collapse9" class="accordion-body collapse">
                                                <div class="accordion-inner">
                                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                                </div>
                                            </div>
                                        </div>
                                        <div class="accordion-group">
                                            <div class="accordion-heading">
                                                <a class="accordion-toggle bg-teal color-white" data-toggle="collapse" data-parent="#accordion" href="#collapse10">
                                                    Collapsible Group Item #10
                                                </a>
                                            </div>
                                            <div id="collapse10" class="accordion-body collapse">
                                                <div class="accordion-inner">
                                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                                </div>
                                            </div>
                                        </div>
                                        <div class="accordion-group">
                                            <div class="accordion-heading">
                                                <a class="accordion-toggle bg-white color-black" data-toggle="collapse" data-parent="#accordion" href="#collapse11">
                                                    Collapsible Group Item #11
                                                </a>
                                            </div>
                                            <div id="collapse11" class="accordion-body collapse">
                                                <div class="accordion-inner">
                                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                                </div>
                                            </div>
                                        </div>
                                        <div class="accordion-group">
                                            <div class="accordion-heading">
                                                <a class="accordion-toggle bg-win8 color-white" data-toggle="collapse" data-parent="#accordion" href="#collapse12">
                                                    Collapsible Group Item #12
                                                </a>
                                            </div>
                                            <div id="collapse12" class="accordion-body collapse">
                                                <div class="accordion-inner">
                                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            
                            <!-- =========================================
                                            END ACCORDION
                            =========================================== -->
                        </div><!--/content-body -->
                    </div><!-- /content -->
                </div><!-- /span content -->
                
                <!-- span side-right -->
                <div class="span2">
                    <!-- side-right -->
                    <aside class="side-right">
                        <!-- sidebar-right -->
                        <div class="sidebar-right">
                            <!--sidebar-right-header-->
                            <div class="sidebar-right-header">
                                <div class="sr-header-right">
                                    <h2><span class="label label-info">$26,875</span></h2>
                                </div>
                                <div class="sr-header-left">
                                    <p class="bold">Balance</p>
                                    <small class="muted">Dec 30 2012</small>
                                </div>
                            </div><!--/sidebar-right-header-->
                            <!--sidebar-right-control-->
                            <div class="sidebar-right-control">
                                <ul class="sr-control-item">
                                    <li class="active"><a href="#contact" data-toggle="tab" title="contacts"><i class="icofont-group"></i></a></li>
                                    <li><a href="#alt1" data-toggle="tab" title="alternative 1"><i class="icofont-flag"></i></a></li>
                                    <li rel="tooltip-bottom" title="view site"><a href="index.html" target="_BLANK"><i class="icofont-external-link"></i></a></li>
                                </ul>
                            </div><!-- /sidebar-right-control-->
                            <!-- sidebar-right-content -->
                            <div class="sidebar-right-content">
                                <div class="tab-content">
                                    <!--contact-->
                                    <div class="tab-pane fade active in" id="contact">
                                        <div class="side-contact">
                                            <!--contact-control-->
                                            <div class="contact-control">
                                                <div class="btn-group pull-right">
                                                    <button class="dropdown-toggle bg-transparent no-border" data-toggle="dropdown">
                                                        <i class="icofont-caret-down"></i>
                                                    </button>
                                                    <ul class="dropdown-menu">
                                                        <li><a href="#"><i class="icofont-certificate color-green"></i> Online</a></li>
                                                        <li><a href="#"><i class="icofont-certificate color-silver-dark"></i> Ofline</a></li>
                                                        <li><a href="#"><i class="icofont-certificate color-red"></i> Busy</a></li>
                                                        <li><a href="#"><i class="icofont-certificate color-orange"></i> Idle</a></li>
                                                    </ul>
                                                </div>
                                                <h5><i class="icofont-comment color-green"></i> John Doe</h5>
                                            </div><!--/contact-control-->
                                            <!--contact-search-->
                                            <div class="contact-search">
                                                <div class="input-icon-prepend">
                                                    <div class="icon">
                                                        <button type="submit">
                                                            <i class="typicn-message color-silver-dark"></i>
                                                        </button>
                                                    </div>
                                                    <input class="input-block-level grd-white" maxlength="11" type="text" name="contact-search" placeholder="chat with..." />
                                                </div>
                                            </div><!--/contact-search-->
                                            <!--contact-list, we set this max-height:380px, you can set this if you want-->
                                            <ul class="contact-list">
                                                <li class="contact-alt grd-white">
                                                    <!--we use data toggle tab for navigate this action-->
                                                    <a href="#chat" data-toggle="tab" data-id="iin@mail.com">
                                                        <!--we use contact-item structure like the component media in bootstrap-->
                                                        <div class="contact-item">
                                                            <div class="pull-left">
                                                                <img class="contact-item-object" style="width: 32px;height: 32px;" src="img/user-thumb-mini.jpg">
                                                            </div>
                                                            <div class="contact-item-body">
                                                                <div class="status" title="busy"><i class="icofont-certificate color-red"></i></div>
                                                                <p class="contact-item-heading bold">Iin T.</p>
                                                                <p class="help-block"><small class="muted">Team Leader</small></p>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </li>
                                                <li class="contact-alt grd-white">
                                                    <!--we use data toggle tab for navigate this action-->
                                                    <a href="#chat" data-toggle="tab" data-id="sungep@mail.com">
                                                        <div class="contact-item">
                                                            <div class="pull-left">
                                                                <img class="contact-item-object" style="width: 32px;height: 32px;" src="img/user-thumb-mini.jpg">
                                                            </div>
                                                            <div class="contact-item-body">
                                                                <div class="status" title="idle"><i class="icofont-certificate color-orange"></i></div>
                                                                <p class="contact-item-heading bold">Sungep</p>
                                                                <p class="help-block"><small class="muted">UI designer</small></p>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </li>
                                                <li class="contact-alt grd-white">
                                                    <!--we use data toggle tab for navigate this action-->
                                                    <a href="#chat" data-toggle="tab" data-id="harab@mail.com">
                                                        <div class="contact-item">
                                                            <div class="pull-left">
                                                                <img class="contact-item-object" style="width: 32px;height: 32px;" src="img/user-thumb-mini.jpg">
                                                            </div>
                                                            <div class="contact-item-body">
                                                                <div class="status" title="ofline"><i class="icofont-certificate color-silver-dark"></i></div>
                                                                <p class="contact-item-heading bold">Harab</p>
                                                                <p class="help-block"><small class="muted">Team Leader</small></p>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </li>
                                                <li class="contact-alt grd-white active"> <!-- you can use this for active contact or your self status-->
                                                    <!--we use data toggle tab for navigate this action-->
                                                    <a href="#chat" data-toggle="tab" data-id="janesmith@mail.com">
                                                        <div class="contact-item">
                                                            <div class="pull-left">
                                                                <img class="contact-item-object" style="width: 32px;height: 32px;" src="img/user-thumb-mini.jpg">
                                                            </div>
                                                            <div class="contact-item-body">
                                                                <div class="status" title="online"><i class="icofont-certificate color-green"></i></div>
                                                                <p class="contact-item-heading bold">Jane smith</p>
                                                                <p class="help-block"><small class="muted">Data analyst</small></p>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </li>
                                                <li class="contact-alt grd-white">
                                                    <!--we use data toggle tab for navigate this action-->
                                                    <a href="#chat" data-toggle="tab" data-id="mahardika@mail.com">
                                                        <div class="contact-item">
                                                            <div class="pull-left">
                                                                <img class="contact-item-object" style="width: 32px;height: 32px;" src="img/user-thumb-mini.jpg">
                                                            </div>
                                                            <div class="contact-item-body">
                                                                <div class="status" title="online"><i class="icofont-certificate color-green"></i></div>
                                                                <p class="contact-item-heading bold">Mahardika</p>
                                                                <p class="help-block"><small class="muted">PHP Developer</small></p>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </li>
                                                <li class="contact-alt grd-white">
                                                    <!--we use data toggle tab for navigate this action-->
                                                    <a href="#chat" data-toggle="tab" data-id="opytama@mail.com">
                                                        <div class="contact-item">
                                                            <div class="pull-left">
                                                                <img class="contact-item-object" style="width: 32px;height: 32px;" src="img/user-thumb-mini.jpg">
                                                            </div>
                                                            <div class="contact-item-body">
                                                                <div class="status" title="ofline"><i class="icofont-certificate color-silver-dark"></i></div>
                                                                <p class="contact-item-heading bold">Opytama</p>
                                                                <p class="help-block"><small class="muted">PHP Developer</small></p>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </li>
                                            </ul><!--/contact-list-->
                                        </div>
                                    </div><!--/contact-->
                                    
                                    <!--chat-->
                                    <div class="tab-pane fade" id="chat">
                                        <div class="side-chat">
                                            <!--header part-->
                                            <div class="chat-header">
                                                <div class="chat-action">
                                                    <div class="btn-group pull-right">
                                                        <!--we use data toggle tab for navigate this action-->
                                                        <a class="bg-transparent no-border" href="#contact" data-toggle="tab" title="minimize"><i class="icofont-minus"></i></a>
                                                        <a class="bg-transparent no-border" title="pop out"><i class="icofont-resize-full"></i></a>
                                                        <a class="bg-transparent no-border" href="#contact" data-toggle="tab" title="close"><i class="icofont-remove-sign"></i></a>
                                                    </div>
                                                </div>
                                                <h5><i class="icofont-certificate color-green"></i> Jane smith</h5>
                                            </div>
                                            <!--content part-->
                                            <div class="chat-content">
                                                <div class="chat-in">
                                                    <span class="chat-time">10:45am</span>
                                                    <strong class="chat-user">Jane smith: </strong>
                                                    <div class="chat-text">Lorem ipsum dolor</div>
                                                </div>
                                                <div class="chat-out">
                                                    <span class="chat-time">10:47am</span>
                                                    <strong class="chat-user">me: </strong>
                                                    <div class="chat-text">Erat duis lectus vel wisi, quibusdam aliquam vehicula eleifend ut</div>
                                                </div>
                                                <div class="chat-in">
                                                    <span class="chat-time">10:50am</span>
                                                    <strong class="chat-user">Jane smith: </strong>
                                                    <div class="chat-text">Et sagittis ut vel dolor nullam proin</div>
                                                </div>
                                                <div class="chat-out">
                                                    <span class="chat-time">10:52am</span>
                                                    <strong class="chat-user">me: </strong>
                                                    <div class="chat-text">massa massa quisque sodales id dictumst.</div>
                                                </div>
                                            </div>
                                            <!--status typed part-->
                                            <div class="chat-typed"><i class="typicn-chat"></i> Jane smith is typing...</div>
                                            <!--input part-->
                                            <div class="chat-input">
                                                <div class="chat-desc muted">Lorem ipsum dolor sit amet.</div>
                                                <textarea class="input-block-level" placeholder="chat here..."></textarea>
                                            </div>
                                        </div>
                                        <div class="divider-content"><span></span></div>
                                    </div><!--chat-->
                                    
                                    <!--alternative 1-->
                                    <div class="tab-pane fade" id="alt1">
                                        <div class="divider-content"><span></span></div> <!--divider-->
                                        
                                        <button class="btn btn-block btn-mini btn-primary">Add Action</button>
                                        <button class="btn btn-block btn-mini">Add Action</button>
                                        
                                        <div class="divider-content"><span></span></div> <!--divider-->
                                        
                                        <!-- side-task -->
                                        <div class="side-task">
                                            <div class="task active">
                                                <span class="task-header">
                                                    <img src="img/loader_16.gif" /> 
                                                    <strong>Portofolio_W34GF.zip</strong>
                                                </span>
                                                <span class="task-desc">9.1 of 17MB - 243KB/sec - 1 min</span>
                                                <div class="progress progress-striped active" rel="tooltip" title="40%">
                                                    <div class="bar bar-success" style="width: 40%;"></div>
                                                </div>
                                            </div>
                                            <div class="task fade in">
                                                <i class="icofont-ok-sign color-green" title="success"></i>
                                                <span class="task-desc">Paralax_bg_5448.jpg</span>
                                                <button data-dismiss="alert" class="close">&times;</button>
                                            </div>
                                            <div class="task fade in">
                                                <i class="icofont-ok-sign color-green" title="success"></i>
                                                <span class="task-desc">Widget_sidebar_W0089.psd</span>
                                                <button data-dismiss="alert" class="close">&times;</button>
                                            </div>
                                            <div class="task fade in">
                                                <i class="icofont-remove-sign color-red" title="failed"></i>
                                                <span class="task-desc">Widget_sidebar_W0089.psd</span>
                                                <button data-dismiss="alert" class="close">&times;</button>
                                            </div>
                                            <div class="task fade in">
                                                <i class="typicn-loop color-silver-dark" title="cancel"></i>
                                                <span class="task-desc">Widget_sidebar_W0089.psd</span>
                                                <button data-dismiss="alert" class="close">&times;</button>
                                            </div>
                                            <div class="task fade in">
                                                <i class="typicn-loop color-silver-dark" title="cancel"></i>
                                                <span class="task-desc">Widget_sidebar_W0089.psd</span>
                                                <button data-dismiss="alert" class="close">&times;</button>
                                            </div>
                                            <div class="task fade in">
                                                <i class="icofont-ok-sign color-green" title="success"></i>
                                                <span class="task-desc">Icons_bg_I98GH.jpg</span>
                                                <button data-dismiss="alert" class="close">&times;</button>
                                            </div>
                                            <div class="task fade in">
                                                <i class="icofont-remove-sign color-red" title="failed"></i>
                                                <span class="task-desc">Dashboard_3805.jpg</span>
                                                <button data-dismiss="alert" class="close">&times;</button>
                                            </div>
                                        </div><!-- /side-task -->
                                        
                                        <div class="divider-content"><span></span></div> <!--divider-->
                                        
                                    </div><!--/alternative 1-->
                                    
                                </div>
                            </div><!-- /sidebar-right-content -->
                        </div><!-- /sidebar-right -->
                    </aside><!-- /side-right -->
                </div><!-- /span side-right -->
            </div>
        </section>

        <!-- section footer -->
        <footer>
            <a rel="to-top" href="#top"><i class="icofont-circle-arrow-up"></i></a>
        </footer>

        <!-- javascript
        ================================================== -->
        <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
        <script src="js/jquery.js"></script>
        <script src="js/bootstrap.js"></script>
        <script src="js/uniform/jquery.uniform.js"></script>
        
        <!-- required sms template js, for full feature-->
        <script src="js/holder.js"></script>
        <script src="js/sms-base.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {
                // try your js
                
                // uniform
                $('[data-form=uniform]').uniform();
                
                // widget action
                $('.custom-action').click(function(){
                    alert('your custom action...')
                });
                
            });
      
        </script>
    </body>
</html>